<%@ page language="java" import="java.util.*,zz.extjs.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	//登录检查
	String currUser = (String) session.getAttribute("user1");
	String userorbit = (String) session.getAttribute("userorbit"); //用户权限
	//currUser ="liaoyh";
	if (currUser == null) //没有经过登录验证
	{
		response.sendRedirect("default.html");//重定向到登录页
		return;
	}
%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	int turnImg = request.getParameter("turnimg")!=null ? Integer.parseInt(request.getParameter("turnimg")):0; //旋转角度
	String picUrl = request.getParameter("Picurl");
	String imgpath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ "/pbimg/";
	String pbid = request.getParameter("pbid");
	List imgfiles = null;
	String step = request.getParameter("step");

	//搜索设置现有图片
	if (pbid == null ){
		response.sendRedirect("pbimglist.jsp");
	}else {

		//得到web根路径//绝对路径
		//getServletContext().getRealPath("/")得到web应用的根路径
		// D:\web\excel，“D:\web”是web应用的根路径，“excel”是根目录下的文件夹
		String Save_Location = getServletContext().getRealPath("/");
		Save_Location = FindFile.getParentPath(Save_Location);
		imgfiles = FindFile.searchPath(Save_Location + "/pbimg/", pbid);
		//out.print(Save_Location);
	}
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<title></title>
		<script type="text/javascript"
			src="jquery-jcrop/jquery/jquery1.2.6.pack.js"></script>
		<script type="text/javascript" src="jquery-jcrop/ui.core.packed.js"></script>
		<script type="text/javascript"
			src="jquery-jcrop/ui.draggable.packed.js"></script>
		<script src="jquery-jcrop/Jcrop/js/jquery.Jcrop.js"></script>
		<link rel="stylesheet" href="jquery-jcrop/Jcrop/css/jquery.Jcrop.css"
			type="text/css" />
		<script type="text/javascript">
  
			function Step1() {
				$("#Step2Container").hide();
			}
		
			function Step2() {
				//$("#Step2Container").show();
				$("#CurruntPicContainer").hide();
			}
			function Step3() {
				$("#Step2Container").hide();
			}
		
			/////////////////////////
			function checkCoords() {
				if (parseInt($('#txt_width').val()))
					if ($('#pbid') && $('#pbid').val().trid() != "")
						return true;
					else
						alert('护照号码为空！')
				else
					alert('请剪裁后再提交！');
				return false;
			};
		
			$(window).load(function() {
				var scaleFactor = 4;
				var setScaleFactor = function(width, height) { //设置缩小倍率,保证图片长边为800
					scaleFactor = Math.round(Math.max(width, height) / 800);
					scaleFactor = (scaleFactor) ? scaleFactor : 4;
				};
		
				$('#cropbox').Jcrop({ //初始化jcrop
					//aspectRatio: 2,
					onSelect : function(c) { //增加scaleFactor倍率
						$('#txt_left').val(c.x * scaleFactor);
						$('#txt_top').val(c.y * scaleFactor);
						$('#txt_DropWidth').val(c.w * scaleFactor);
						$('#txt_DropHeight').val(c.h * scaleFactor);
					}
				});
		
				var $iconElement = $("#cropbox");
		
				//获取上传图片的实际高度，宽度
				var image = new Image();
				image.src = $iconElement.attr("src");
				var realWidth = image.width;
				var realHeight = image.height;
				image = null;
				setScaleFactor(realWidth, realHeight);
		
				//图片实际尺寸，并近似到整数
				var currentWidth = Math.round(realWidth / scaleFactor);
				var currentHeight = Math.round(realHeight / scaleFactor);
		
				//图片相对CANVAS的初始位置，图片相对画布居中
				var originLeft = 0;
				var originTop = 0;
		
				//设置图片当前尺寸和位置
				$iconElement.css({
					width : currentWidth + "px",
					height : currentHeight + "px",
					left : originLeft + "px",
					top : originTop + "px"
				});
		
				//初始化默认值
				$("#txt_width").val(realWidth);
				$("#txt_height").val(realHeight);
		
				//根据图片的比例（水平或者竖直），添加不同的样式
				var setHVSize = function(el) {
					el.removeClass("vs");
					el.removeClass("hs");
					var myimg = new Image();
					myimg.src = el.get(0).src;
					if (myimg.width > myimg.height)
						//this.width(800);
						el.addClass("vs");
					else
						el.addClass("hs");
					//this.height(800);
				};
				//设置小图点击显示
				$(".imgphoto").click(function() {
					//alert("asd");
					//$(".fullphoto").src=this.src;
					$("#fullphoto").attr("src", this.src);
					$(".hidden").removeClass("hidden");
					setHVSize($("#fullphoto"));
					//$(".fullphoto").css("display","");
				});
				//裁剪时双点提交
				$("#Step2Container").dblclick(function() {
					//alert("asd");
					//$(".fullphoto").src=this.src;
					$("#jcropsubmit")[0].click();
				});
				$(".trunimg").click(function(){
					var str = document.location.href
					var g = this.id=="turnleft" ? -90 : 90;
					var p = $("#picname");
					var pid = $("#pbid")[0].value==null?"":"&pbid="+$("#pbid")[0].value;
					str = str.substr(0, str.lastIndexOf("/") + 1)
							+ "UpLoadUserHeadImage?turnimg=" + g +pid+ "&imgfile="+p[0].value;
					//alert(str);
					window.location.href = str;
					//$("#cropbox").attr("src", str);
				});
				$("delbtn").click(function(){
					alert('尚不提供删除功能');
				})
		
			});
		</script>
		<style type="text/css">
	body {
		padding-top: 20px;
		font-size: 12px;
		margin-left: 20px;
		font-family: 微软雅黑, 宋体;
		text-align: center;
		background-color: #eee;
	}
	
	.title {
		border-bottom: solid 1px #ccc;
		padding-left: 5px;
		padding-top: 5px;
	}
	
	.photocontainer {
		margin: 15px;
		padding: 5px 25px;
	}
	
	.uploader {
		margin-top: 5px;
		margin-left: 5px;
		color: #555;
		line-height: 150%;
	}
	
	.hidden {
		display: none;
	}
	
	.hs {
		height: 800px;
	}
	
	.vs {
		width: 800px;
	}
	
	.transimg { 800px;
		
	}
	
	.page {
		width: 1000px;
		background: none repeat scroll 0 0 transparent;
		margin: 25px 1em 100px;
	}
	
	.xtop,.xbottom {
		display: block;
		background: transparent;
		font-size: 1px;
	}
	
	.xb1,.xb2,.xb3,.xb4 {
		display: block;
		overflow: hidden;
	}
	
	.xb1,.xb2,.xb3 {
		height: 1px;
	}
	
	.xb2,.xb3,.xb4 {
		background: #fff;
		border-left: 1px solid #aaa;
		border-right: 1px solid #aaa;
	}
	
	.xb1 {
		margin: 0 5px;
		background: #aaa;
	}
	
	.xb2 {
		margin: 0 3px;
		border-width: 0 2px;
	}
	
	.xb3 {
		margin: 0 2px;
	}
	
	.xb4 {
		height: 2px;
		margin: 0 1px;
	}
	
	.xboxcontent {
		display: block;
		background: #fff;
		border: 0 solid #aaa;
		border-width: 0 1px;
		padding: 10px 20px;
	}
	/*.xboxcontent {
						    background: none repeat scroll 0 0 #fff;
						    border-color: #aaa;
						    border-left: 1px solid #aaa;
						    border-right: 1px solid #aaa;
						    border-bottom: 1px solid #aaa;
						    border-width: 0 1px;
						    display: block;
						    padding: 10px;
						}*/
	</style>
	</head>
	<body>
		<div class='page'>
			<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b
				class="xb3"></b><b class="xb4"></b>
			</b>
			<div class="xboxcontent">

				<!--当前照片-->
				<div id="CurruntPicContainer" style="text-align: left;">
					<form name="form1" method="post" action="UpLoadUserHeadImage?pbid=<%=pbid%>"
						onsubmit="return $('#fuPhoto') && $.trim($('#fuPhoto').val())!=''"
						id="form1" enctype="multipart/form-data">

						<!--Step 1-->
						<div id="Step1Container">
							<div class="title">
								<b>添加记录</b> (请选择新的照片文件，文件需小于2.5MB)
							</div>
							<div id="uploadcontainer" class="uploader">

								<div class="uploaddiv">
								<input type="hidden" name="1pbid" value="<%=pbid%>" />
								<input type="file" name="fuPhoto" style="height: 20px"
										id="fuPhoto" title="选择照片" />

									<input type="submit" name="btnUpload" style="height: 20px"
										value="上 传" id="btnUpload" />
								</div>
							</div>
						</div>
					</form>
					<div class="title">
						<b>当前记录</b>
					</div>
					<div class="uploader">
						注意：图片文件名大小写可能影响显示结果
					</div>
					<div style="text-align: center;" class='hidden' >
					<img id='fullphoto'  class='hidden'
							src='<%= imgfiles != null &&imgfiles.size()>0?imgpath + "/" + imgfiles.get(0):"#"%>'
							style='padding: 25px; border: solid 1px #ccc;' />

					<div style='padding: 5px;'><input type="button" id="delbtn" class='hidden' value="删除图片" width="100px"/></div>
					</div>

					<div style="margin: 20px;">
						<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b
							class="xb3"></b><b class="xb4"></b>
						</b>
						<div class="xboxcontent">
							<%for (int i = 0; imgfiles != null && i < imgfiles.size(); i++) {%>
							<img class='imgphoto' src=' <%=imgpath + "/" + imgfiles.get(i)%>'
								style='height: 150px; margin: 3px'>
							<%}%>
						</div>
						<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b
							class="xb2"></b><b class="xb1"></b>
						</b>
					</div>

				</div>
				
				<!--Step 2-->
				<div id="Step2Container" style="width: 100%; ">
					<div class="title">
						<b> 裁切头像照片</b>
					</div>
					<form action="ZoomImage" method="post"
						onsubmit="return checkCoords();"
						style="width: 400px; margin: 15px; padding: 5px; border: solid 1px #ccc;">
						<input type="hidden" id="txt_left" name="txt_left" />
						<input type="hidden" id="txt_top" name="txt_top" />
						<input type="hidden" id="txt_width" name="txt_width" />
						<input type="hidden" id="txt_height" name="txt_height" />
						<input type="hidden" id="txt_DropWidth" name="txt_DropWidth" />
						<input type="hidden" id="txt_DropHeight" name="txt_DropHeight" />
						<input type="hidden" id="picname" name="picname" value="<%=picUrl%>" />
						护照号码：
						<input type="text" name="pbid" id="pbid" value="<%=pbid%>" />
						<input id="jcropsubmit" type="submit" value="修改完成" />
					</form>
					<div style=" mamargin 25px;">

					</div>
					<img id="cropbox" src="UploadPhoto/<%=picUrl%>" style="border-width: 0px;" />
					<!--  -->
						
					<div>
						<input id="turnleft" class="trunimg" type="button" value="<< 向左旋转90°" 
						style="margin: 10px;" />
						<input id="turnright" class="trunimg" type="button" value="向右旋转90° >>"
							style="margin: 10px;" />
					</div>
				</div>

			</div>
			<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b
				class="xb2"></b><b class="xb1"></b>
			</b>
		</div>
		<%if (null == picUrl || "".equals(picUrl)) {%>
		<script type='text/javascript'>Step1();</script>
		<%
			} else if (!"".equals(picUrl) && "2".equals(step)) {
		%>
		<script type='text/javascript'>Step2();</script>
		<%
			} else if (!"".equals(picUrl) && "3".equals(step)) {
		%>
		<script type='text/javascript'>Step3();</script>
		<%
			}
		%>
	</body>
</html>